<template>
    <div class="home-top">
        <h3>人气推荐</h3>
        <div class="content">
            <van-card
            v-for="item in goodsList"
            :key="item.id"
            :tag="item.tag"
            :price="item.retail_price"
            :origin-price="item.origin_price"
            :desc="item.goods_brief"
            :title="item.name"
            :thumb="item.list_pic_url"
            >
            </van-card>
        </div>
    </div>
</template>

<script setup>
const goodsList=[
    {
    retail_price:'15000.00',
    name:'相机',
    goods_brief:'徕卡光影,2亿像素',
    list_pic_url:'images/top1.jpg',
    tag:'TOP1'
    },
    {
    retail_price:'88.00',
    origin_price:'99.00',
    name:'转接器',
    goods_brief:'急速转接,畅快体验',
    list_pic_url:'images/top2.jpg',
    tag:'TOP2'
    },
    {
    retail_price:'1788.00',
    origin_price:'2000.00',
    name:'空气净化器',
    goods_brief:'带给你完美的空气',
    list_pic_url:'images/top3.jpg',
    tag:'TOP3'
    },
    {
    retail_price:'388.00',
    origin_price:'500.00',
    name:'音响',
    goods_brief:'影院级音质',
    list_pic_url:'images/top4.jpg',
    tag:'TOP4'
    },
    {
    retail_price:'19197.00',
    origin_price:'20000.00',
    name:'投影仪',
    goods_brief:'宝马同品牌,真4k无损',
    list_pic_url:'images/top5.jpg',
    tag:'TOP5'
    },
]

</script>
<style lang="less" scoped>
.home-top {
   h3 {
    font-size: 22px;
    line-height: 30px;  text-align: center; margin: 0.5rem 0;
    }
.content {
    --van-tag-primary-color: #FF8000; --van-card-font-size: 16px;
    --van-card-background: #f9f9f9;
    background: var(--van-card-background);
    :deep(.van-card) {
        margin-top: 0;
        .van-card 
         title {
            padding: 10px 0 5px; 
        }
        .van-card   
        price-currency {
    font-size: var(--van-card-font-size); }
    }
    &::after {
    content: '';
    display: block; height: 3rem;
        }
    } 
}


</style>